<template>
    <div class="job-box" @click="handleJump">
        <div class="title-cont">
            <h2>{{ jobinfo.name }}</h2>
            <h2>{{jobinfo.num}}人</h2>
        </div>
        <div class="intro-cont">
            <p>{{ jobinfo.type }}</p>
            <p>{{ jobinfo.city }}</p>
        </div>
        <div class="time-cont">
            <img src="../../../assets/images/icon_rq.png" alt="">
            <p>{{ jobinfo.createtime_text }}</p>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps(['jobinfo'])
const router = useRouter()
const handleJump = () => {
    router.push({
        path: '/job-detail',
        query: {
            id: props.jobinfo.id,
            name: props.jobinfo.name
        }
    })
}
</script>

<style lang="scss" scoped>
.job-box {
    width: 1.9792rem;
    height: .8854rem;
    background: #FFFFFF;
    padding: .1563rem 0 .1042rem .2083rem;
    margin-bottom: .1042rem;
    box-shadow: 0rem .0156rem .0521rem 0rem rgba(204, 204, 204, 0.46);
    cursor: pointer;

    >.title-cont {
        display: flex;
        font-size: .125rem;
        font-weight: 400;
        color: #111111;
        margin-bottom: .1042rem;

        >h2:nth-of-type(1) {
            margin-right: .0521rem;
        }
    }

    >.intro-cont {
        font-size: .0729rem;
        font-weight: 300;
        color: #999999;
        display: flex;
        margin-bottom: .2708rem;

        >p:nth-of-type(1) {
            margin-right: .1042rem;
        }
    }

    >.time-cont {
        font-size: .0677rem;
        font-weight: 400;
        color: #999999;
        display: flex;

        >img {
            width: .0833rem;
            height: .0729rem;
            margin-right: .0208rem;
        }

        >p {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>